<template>
    <div class="box-top">
        <el-form :model="loginfrom" :rules="rules" ref="myForm">
            <div class="bg-img">
                <div class="bg_login">
                    <div class="model">
                        <span class="model_title">游泳编排管理系统</span>
                    </div>
                    <div class="model2">
                        <span class="model_plogin">请登录</span>
                    </div>
                    <div class="login">
                        <img class="us-pa" src="/uploads/admin_jurassic.png" alt="">
                        <el-form-item prop="userName">
                            <el-input class="login_inp" v-model="loginfrom.userName" @keyup.enter="handleEnterKey"
                                placeholder="Username"></el-input>
                        </el-form-item>
                    </div>
                    <div class="login">
                        <img class="us-pa" src="/uploads/password.png" alt="">
                        <el-form-item prop="password">
                            <el-input class="login_inp" show-password v-model="loginfrom.password"
                                @keyup.enter="handleEnterKey" placeholder="Password"></el-input>
                        </el-form-item>
                    </div>
                    <el-button type="primary" @click="submitForm">LOGIN</el-button>
                </div>
            </div>
        </el-form>
    </div>
</template>

<script>
export default {
    data() {
        return {
            loginfrom: {
                userName: null,
                password: null,
            },
            rules: {
                userName: [
                    { required: true, message: '请输入账号', trigger: 'blur' },
                ],
                password: [
                    { required: true, message: '请输入密码', trigger: 'blur' },
                ],
            }
        }
    },
    methods: {
        handleEnterKey() {
            this.submitForm()
        },
        submitForm() {
            this.$refs.myForm.validate(async (valid) => {
                if (valid) {
                    try {
                        const result = await this.$http.post(this.BACKEND_URL + '/user/login', this.loginfrom, {
                            credentials: 'include'
                        })
                        if (result.data.code == 0) {
                            sessionStorage.setItem("stu_token", JSON.
                                stringify(result.headers.token));
                            this.$router.replace({ name: 'bci' });
                        } else {
                            this.$message.error(result.data.msg)
                        }
                    } catch (error) {
                        if (error === undefined) {
                            this.$message.error('连接错误-登陆失败');
                        }
                    }
                } else {
                    this.$message.error('请填写完整信息');
                }
            });
        },
    }
}
</script>

<style lang="less" scoped>
:deep(.el-form) {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.box-top {
    height: 100%;
}

.bg-img {
    height: 100%;
    width: 100%;
    background-size: cover;
    background-image: url("/uploads/loginimg.jpg");
    display: flex;
    align-items: center;
    justify-content: center;

    .bg_login {
        padding: 20px 15px;
        background-color: #FFFFFF;
        width: 401.8px;
        height: 265px;
        border-radius: 10px;
    }
}

.model_title {
    font-family: 'KaiTi';
    font-size: 40px;
    font-weight: bold;
    color: #050404;
}

.model2 {
    margin-top: 15px;
    margin-bottom: 15px;
}

.model_plogin {
    font-family: 'KaiTi';
    font-size: 16px;
    font-weight: bold;
    color: #6C6B6B;
}

.login {
    display: flex;
    justify-content: center;

    .us-pa {
        width: 25px;
        height: 25px;
    }
}

:deep(.el-button) {
    margin-top: 12px;
    width: 68%;
}

:deep(.el-input input) {
    color: #000;
}

.login_inp {
    margin-left: 15px;
    width: 240px;
}
</style>
